<template>
  <div class="tableAction">
    <div class="flex items-center justify-center">
      <el-space>
        <template v-for="action in getActions" :key="action.label">
          <template v-if="!action.isConfirm">
            <el-button v-bind="action">
              {{ action.label }}
              <template #icon v-if="action.icon">
                <component :is="action.icon" />
              </template>
            </el-button>
          </template>
          <template v-else>
            <el-popconfirm v-bind="action.popConfirm">
              <template #reference>
                <el-button v-bind="action">
                  {{ action.label }}
                  <template #icon v-if="action.icon">
                    <component :is="action.icon" />
                  </template>
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </template>
        <el-dropdown v-if="dropDownActions && getDropdownList.length" @command="select">
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="item in getDropdownList" :command="item.key" :key="item.key">
                {{ item.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>

          <slot name="more" v-if="$slots.more"></slot>
          <el-button icon-placement="right" v-bind="getMoreProps" v-else>
            <template #icon v-if="getMoreProps.icon">
              <component :is="getMoreProps.icon" />
            </template>
            <div class="flex items-center">
              <span>{{ dropDownProps.label }}</span>
              <el-icon class="ml-1 el-input__icon" size="14" v-if="!getMoreProps.icon">
                <DownOutlined />
              </el-icon>
            </div>
          </el-button>
        </el-dropdown>
      </el-space>
    </div>
  </div>
</template>

<script lang="ts">
  import { defineComponent, PropType, computed, toRaw } from 'vue';
  import { ActionItem } from '../types/tableAction';
  import { usePermission } from '@/hooks/web/usePermission';
  import { isBoolean, isFunction } from '@/utils/is';
  import { DownOutlined } from '@vicons/antd';
  import { Render } from '../components/Render';

  export default defineComponent({
    name: 'TableAction',
    components: { DownOutlined, Render },
    props: {
      actions: {
        type: Array as PropType<ActionItem[]>,
        default: null,
        required: true,
      },
      dropDownActions: {
        type: Array as PropType<ActionItem[]>,
        default: null,
      },
      style: {
        type: String as PropType<String>,
        default: 'button',
      },
      select: {
        type: Function as PropType<Function>,
        default: () => {},
      },
      dropDownProps: {
        type: Object as PropType<ActionItem>,
        default: () => {
          return {
            label: '更多',
          };
        },
      },
    },
    setup(props) {
      const { hasPermission } = usePermission();

      const getMoreProps: any = computed(() => {
        const { dropDownProps } = props;
        return {
          size: 'default',
          ...dropDownProps,
        };
      });

      const getDropdownList = computed(() => {
        return (toRaw(props.dropDownActions) || [])
          .filter((action) => {
            return hasPermission(action.auth as string[]) && isIfShow(action);
          })
          .map((action) => {
            return {
              size: 'default',
              ...action,
            };
          });
      });

      function isIfShow(action: ActionItem): boolean {
        const ifShow = action.ifShow;

        let isIfShow = true;

        if (isBoolean(ifShow)) {
          isIfShow = ifShow;
        }
        if (isFunction(ifShow)) {
          isIfShow = ifShow(action);
        }
        return isIfShow;
      }

      const getActions = computed(() => {
        return (toRaw(props.actions) || [])
          .filter((action) => {
            return hasPermission(action.auth as string[]) && isIfShow(action);
          })
          .map((action: any) => {
            //需要展示什么风格，自己修改一下参数
            return {
              size: 'default',
              ...action,
            };
          });
      });

      return {
        getActions,
        getDropdownList,
        getMoreProps,
      };
    },
  });
</script>
